/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import { Form, Space, Input, Button, Popconfirm } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import type { KbEditTable } from './index.d';

const { Item } = Form;
const Index = ({ type }: KbEditTable) => {
  const InputTypes = {
    selfTransport: {
      name: 'ladder_price_1',
      itemName: 'ratio',
      unit: '折扣',
      style: {},
    },
    platform: {
      name: 'ladder_price_4',
      itemName: 'price',
      unit: '元/单',
      style: {},
    },
  };

  return (
    <Form.List name={InputTypes[type].name}>
      {(fields, { add, remove }) => (
        <>
          {fields.map(({ key, name, ...restField }) => (
            <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align='baseline'>
              <Item
                {...restField}
                name={[name, 'min']}
                style={InputTypes[type].style}
                rules={[
                  { required: true, message: '请输入必填项' },
                  { pattern: /^(\+|\d{1,9})$/, message: '请输入数字或“+”' },
                ]}
              >
                <Input placeholder='请输入' />
              </Item>
              <Item> - </Item>
              <Item
                {...restField}
                name={[name, 'max']}
                style={InputTypes[type].style}
                rules={[
                  { required: true, message: '请输入必填项' },
                  { pattern: /^(\+|\d{1,9})$/, message: '请输入数字或“+”' },
                ]}
              >
                <Input placeholder='请输入' />
              </Item>
              <Item style={{ width: 50 }}> 单量享 </Item>
              <Item
                {...restField}
                name={[name, InputTypes[type].itemName]}
                style={InputTypes[type].style}
                rules={[{ required: true, message: '请输入必填项' }]}
              >
                <Input placeholder='请输入' />
              </Item>
              <Item style={{ width: 40 }}> {InputTypes[type].unit} </Item>
              <Popconfirm title='你确定删除吗？' onConfirm={remove.bind(null, name)}>
                <MinusCircleOutlined style={{ color: 'red' }} />
              </Popconfirm>
            </Space>
          ))}
          <Item>
            <Button type='primary' ghost onClick={() => add()} icon={<PlusOutlined />}>
              添加
            </Button>
          </Item>
        </>
      )}
    </Form.List>
  );
};

export default Index;
